<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content">
        <div class="swipe-div">
            <mt-swipe :auto="0">
                <mt-swipe-item class="slide1" v-for="(img, index) in imgList" :key="index"><a href="javascript: void(0)"><img :src="img" /></a></mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="audit-details">
            <ul>
                <li>
                    <p class="audit-details-title">样衣编号:</p>
                    <p class="audit-details-conts">{{ data.sampleId }}</p>
                </li>
                <li>
                    <p class="audit-details-title">大类:</p>
                    <p class="audit-details-conts">{{ data.dlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">货号:</p>
                    <p class="audit-details-conts">{{ data.pcode }}</p>
                </li>
                <li>
                    <p class="audit-details-title">小类:</p>
                    <p class="audit-details-conts">{{ data.xlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">波段号:</p>
                    <p class="audit-details-conts">{{ data.bandname }}</p>
                </li>
                <li>
                    <p class="audit-details-title">合作方式:</p>
                    <p class="audit-details-conts">{{ data.jyfs }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商编码:</p>
                    <p class="audit-details-conts">{{ data.supplierid }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商:</p>
                    <p class="audit-details-conts">{{ data.vendername }}</p>
                </li>
            </ul>
        </div>
        <div class="audit-regula">
            <div class="audit-regula-title">
                <h1>进度详情</h1>
            </div>
            <div class="audit-regula-cont oneScore-cont picture-details-upload-cont">
                <ul>
                     <!-- <li>
                        <a href="javascript:void(0)" >
                            <time>2016-02-18</time>
                            <p class="picture-details-upload-text">完成</p>
                        </a>
                    </li> -->
                    <!-- :class="{'noActive': state.retstatus == 2}" -->
                     <li v-for="(state, index) in stateTree" :key="index" @click="goDetail(state)">
                        <a href="javascript:void(0)" >
                            <time>{{ state.checkdate }}</time>
                            <p class="picture-details-upload-text">{{ state.statusname }}</p>
                            <p class="picture-details-upload-mark">({{ state.retstatusname }})</p>
                        </a>
                    </li>
                    <!-- <li>
                        <a href="javascript:void(0)">
                            <time>2016-01-05</time>
                            <p class="picture-details-upload-text">开始</p>
                        </a>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
    <mt-popup
        v-model="popupVisible"
        position = "left"
        popup-transition="popup-fade">
        <div class="popu-div">{{popupTitle}}<i @click="popupVisible=false" class="icon iconfont icon-guanbi"></i></div>
        <div class="popu-body">
            <div class="audit-regula-cont" v-if="popupStep == 5">
                <ul>
                    <li>
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>买手</label>
                            <label class="decision-details-label">1</label>
                        </div>
                    </li>
                    <li>
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>店长</label>
                            <label class="decision-details-label">2</label>
                        </div>
                    </li>
                    <li>
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>采购经理</label>
                            <label class="decision-details-label">3</label>
                        </div>
                    </li>
                    <li>
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>外围评审</label>
                            <label class="decision-details-label">4</label>
                        </div>
                    </li>
                    <li>
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>买手团队</label>
                            <label class="decision-details-label">5</label>
                        </div>
                    </li>
                    <li>
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>外围团队</label>
                            <label class="decision-details-label">6</label>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="audit-regula" v-if="popupStep == 2">
                <div class="audit-regula-cont">
                    <ul>
                        <li v-for="(item, index) in checkList" :key="index">
                            <div class="mui-input-row mui-checkbox audit-details-box" v-if="item.checkflag==1">
                                <label class="lab left">{{ item.checkinfo }}</label>
                                <label class="lab right">{{ item.reason }}</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="audit-regula" v-if="popupStep == 13">
                <div class="audit-regula-cont">
                    <ul>
                        <li v-for="(item, index) in reasonList" :key="index">
                            <div class="mui-input-row mui-checkbox audit-details-box">
                                <label class="lab left">{{ item.checkinfo }}</label>
                                <label class="lab right">{{ item.reason }}</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </mt-popup>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import { Swipe, SwipeItem, Popup } from 'mint-ui';
import API from '@/service/api'
export default {
    components: { commonHeader, Swipe, SwipeItem, Popup },
    data() {
        return {
            title: '样衣详情',
            data: {},
            imgList: [],
            stateTree: [],
            popupVisible: false,
            popupTitle: '海选决策评分',
            popupStep: 0,
            resolve: {},
            checkList: [],
            reasonList: []
        }
    },
    computed: {
        ...mapState( [ 'sample_id', 'sample_no' ] ) 
    },      
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING' ] ),
        async initialization() {
            //获取基本信息
            this.data = await API.currency.getSampleDetail({ ID: this.sample_no })
            //获取样衣图片列表
            let imgs = await API.currency.getSampleImgs({ sampleId: this.sample_id })
            for(let i = 1; i<6; i++) {
                const img = imgs[`limg${i}`]
                if(img)
                    this.imgList.push(img)
            }
            let states = await API.band.getStateTree()
            let nowState = await API.band.getWorkState({sampleId: this.sample_id})
            nowState.sort((x, y)=> {
              if(x.status<y.status)  return 1
              else if(x.status>y.status) return -1
            })
            this.stateTree = nowState
            this.UPDATE_SHOW_LOADING(false)
        },
        goDetail(item) {
            // this.popupVisible = true
            this.popupStep = item.status
            if(item.status == 5) {
                this.popupVisible = true
            }else if(item.status == 2) {
                this.popupVisible = true
                this.popupTitle = '样衣照片审核情况'
                API.ckphoto.getSampleCheckList({sampleId: this.sample_id}).then(res=> {
                    this.checkList = res
                })
            }else if(item.status == 13) {
                this.popupVisible = true
                this.popupTitle = '样衣二审审核情况'
                API.secondInstance.getReason({sampleId: this.sample_id}).then(res=> {
                    this.reasonList = res
                })
            }
        },
        viewDelivery() {
            this.$router.push( { name: 'primaryDelivery' } )
        }
    },
    created() {
       this.initialization()
    } 
}
</script>
<style scoped lang="less">
.mint-popup {
    width: 100%;
    height: 100%;
    .popu-div {
        text-align: center;
        font-size: 20px;
        margin: 5px 0;
        height: 20px;
        width: 100%;
        .icon-guanbi{
            position: fixed;
            right: 1px;
            top: -5px;
            margin: 0!important;
            padding: 0!important;
            font-size: 30px!important;
        }
    }
    .popu-body{
        margin-top: 60px;
        height: calc(100% - 80px);
        width: 100%;
        .lab{
            width: 49%;
            padding-right: 0px!important;
        }
        .right {
            text-align: right;
        }
    }
}
</style>